<template>
  <div class="dashboard-container">
    <div style="display: flex;align-items: center;padding: 10px">
      <div style="font-size: 14px;color: #333333">
        选择模板
      </div>
      <div>
        <el-select v-model="selectVal" style="width: 300px;margin-left: 10px;margin-right: 10px">
          <el-option value="1" label="WSD4 A1 ST2005 EP coating">WSD4 A1 ST2005 EP coating</el-option>
        </el-select>
      </div>
      <div>
        <el-button size="small">确定</el-button>
        <el-button size="small">新建</el-button>
      </div>
    </div>
    <div id="jsmind_container" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind/js/jsmind.js'

export default {
  name: 'Dashboard',
  components: { jsMind },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  data() {
    return {
      selectVal: '',
      mind: {
        /* 元数据，定义思维导图的名称、作者、版本等信息 */
        meta: {
          name: '思维导图',
          author: '',
          version: '0.2'
        },
        /* 数据格式声明 */
        format: 'node_tree',
        /* 数据内容 */
        data: {
          id: 'root',
          topic: 'WSD4 A1 ST2005 EP coating',
          children: [
            {
              id: 'MAE Info', // [必选] ID, 所有节点的ID不应有重复，否则ID重复的结节将被忽略
              topic: 'MAE Info', // [必选] 节点上显示的内容
              direction: 'right', // [可选] 节点的方向，此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
              expanded: true, // [可选] 该节点是否是展开状态，默认为 true
              children: [
                { id: 'Drawing', topic: 'Drawing', children: [
                  { id: 'Layout', topic: 'Layout' },
                  { id: 'Mechanical drawing 2D/3D', topic: 'Mechanical drawing 2D/3D' },
                  { id: 'E-Plan', topic: 'E-Plan' },
                  { id: 'Key Product drawing', topic: 'Key Product drawing' },
                  { id: 'Acceptance Doc', topic: 'Acceptance Doc' }
                ] },
                { id: 'Software', topic: 'Software' },
                { id: 'MAE Norm and Standard', topic: 'MAE Norm and Standard' },
                { id: 'Products Series', topic: 'Products Series' },

                { id: 'Release DOC', topic: 'Release DOC' }

              ]
            },
            {
              id: 'Process',
              topic: 'Process',
              direction: 'right',
              expanded: true,
              children: [
                { id: 'Description', topic: 'Description', children: [
                  { id: 'Key Process', topic: 'Key Process' },
                  { id: 'Responsible: Fan yongbo', topic: 'Responsible: Fan yongbo' },
                  { id: 'Training material', topic: 'Training material' },
                  { id: 'MAE List', topic: 'MAE List' },
                  { id: 'Parameters(Link to Parameter managment System)', topic: 'Parameters(Link to Parameter managment System)' },
                  { id: 'Specification', topic: 'Specification' },
                  { id: 'Process drawings', topic: 'Process drawings' },
                  { id: 'Process Key parts', topic: 'Process Key parts' }
                ] },
                { id: 'Failure analysis', topic: 'Failure analysis', children: [
                  { id: 'Typic failure collection fishbone', topic: 'Typic failure collection fishbone' },
                  { id: 'EP Failure catalogue', topic: 'EP Failure catalogue' },
                  { id: 'Lesson learn', topic: 'Lesson learn' }
                ] },
                { id: 'Historic record&Corrective measures', topic: 'Historic record&Corrective measures', children: [
                  { id: ' QG Release', topic: ' QG Release' },
                  { id: 'Acceptance', topic: 'Acceptance' },
                  { id: 'Localization', topic: 'Localization' },
                  { id: ' modification', topic: ' modification ' }
                ] },
                { id: 'CiP', topic: 'CiP', children: [
                  { id: '2015 A3 improve FPC5-2 EP', topic: '2015 A3 improve FPC5-2 EP' },
                  { id: '2017 0721 NSA spray-coating machine status3', topic: '2017 0721 NSA spray-coating machine status3' },
                  { id: '2020 A3 FPC5-A3 ep-coating timeout PPM reduction Xu Wangli v3', topic: '2020 A3 FPC5-A3 ep-coating timeout PPM reduction Xu Wangli v3' }
                ] }

              ]
            },
            {
              id: 'Maintenance',
              topic: 'Maintenance',
              direction: 'right',
              children: [
                { id: 'Instruction (Link to DWl)', topic: 'Instruction (Link to DWl)' },
                { id: 'Record and measures/Solution(Link To MIS+)', topic: 'Record and measures/Solution(Link To MIS+)' },
                { id: 'Training and Experiance share', topic: 'Training and Experiance share' },
                { id: 'lesson learn', topic: 'lesson learn' },
                { id: 'CIP', topic: 'CIP' }
              ]
            },
            {
              id: 'Spare parts',
              topic: 'Spare parts',
              direction: 'right',
              children: [
                { id: ' Link to sPM (Or Develop interface)', topic: ' Link to sPM (Or Develop interface)' },
                { id: 'TPM (Link to MIS+)', topic: 'TPM (Link to MIS+)' },
                { id: 'Localization record', topic: 'Localization record' },
                { id: 'Modification record', topic: 'Modification record' }
              ]
            },
            {
              id: 'Code',
              topic: 'Code',
              direction: 'left',
              children: [
                { id: 'Plant No:2570', topic: 'Plant No:2570' },
                { id: 'Dep No.Ws', topic: 'Dep No.Ws' },
                { id: 'Line No.WSD4 A1', topic: 'Line No.WSD4 A1' },
                { id: 'ST_No.ST2005', topic: 'ST_No.ST2005' },
                { id: 'Process belong', topic: 'Process belong' },
                { id: 'Built Date', topic: 'Built Date' },
                { id: 'Last Moditication Date', topic: 'Last Moditication Date' },
                { id: 'Supplier', topic: 'Supplier ' }
              ]
            },
            {
              id: 'MAE History List',
              topic: 'MAE History List',
              direction: 'left',
              children: [
                { id: 'All process/Parts/maintance change list', topic: 'All process/Parts/maintance change list' },
                { id: 'Relocation List', topic: 'Relocation List' },
                { id: 'Reuse List', topic: 'Reuse List' }
              ]
            }
          ]
        }
      },
      options: {
        container: 'jsmind_container', // [必选] 容器的ID
        editable: true, // [可选] 是否启用编辑
        theme: '', // [可选] 主题
        view: {
          engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
          hmargin: 100, // 思维导图距容器外框的最小水平距离
          vmargin: 50, // 思维导图距容器外框的最小垂直距离
          line_width: 1, // 思维导图线条的粗细
          line_color: '#C18AFB' // 思维导图线条的颜色
        },
        layout: {
          hspace: 100, // 节点之间的水平间距
          vspace: 20, // 节点之间的垂直间距
          pspace: 20 // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
        },
        shortcut: {
          enable: false // 是否启用快捷键 默认为true
        },
        menuOpts: { // 这里加入一个专门配置menu的对象
          showMenu: true, // showMenu 为 true 则打开右键功能 ，反之关闭
          injectionList: [
            { target: 'edit', text: '编辑节点' },
            { target: 'delete', text: '删除节点' },
            { target: 'addChild', text: '添加子节点' },
            { target: 'addBrother', text: '添加兄弟节点' }
          ],
          style: {
            menuItem: {
              'line-height': '28px'
            }
          }
        }
      }
    }
  },
  mounted() {
    // 初始化
    this.jm = jsMind.show(this.options, this.mind)
  }
}
</script>
<style lang="less" scoped>
#jsmind_container {
  width: 100%;
  height: calc(100vh - 140px);
}
.brain_content {
  /deep/ jmnodes.theme-clouds jmnode{background-color: #f0fadd;color:#333;}
  /deep/ jmnodes.theme-clouds jmnode:hover{background-color:#D6E3BD;}
  /deep/ jmnodes.theme-clouds jmnode.selected{background-color: #b6d47e;color:#333;}
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .header_btn {
    height: 40px;
    line-height: 40px;
  }
  .js_mind {
    flex: 1;
  }
}
</style>
